<template>
	<div class="box-content w-full h-0 pb-[43.85%] app-hover-offset relative" @click="onClick">
		<base-image
			class="absolute inset-0 w-full h-full rounded-lg"
			:src="data?.imagePath || 'placeholder-banner'"
			:type="data?.imagePath ? imageType : 'other'"></base-image>
	</div>
</template>

<script lang="ts" setup>
import BaseImage from '../../base/image/index.vue'
import { AdInfo } from '@/types'
import { PropType } from 'vue'
import { jumpRouteUrl } from '@/utils'

const props = defineProps({
	data: {
		type: Object as PropType<AdInfo | null>
	},
	imageType: {
		type: String,
		default: 'server'
	}
})

const onClick = () => {
	jumpRouteUrl(props.data?.redirectPath)
}
</script>
